Day21：Ant Design 裡的 Pagination

2022 iThome 鐵人賽

DAY 21

自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列第 21 篇

14th鐵人賽

Annie

2022-10-06 23:55:19

437 瀏覽

分享至

先前介紹 Table 時有稍微介紹過 ANTD 的 Pagination，它就是字面上的頁碼沒錯，實際在網頁開發時，我們很常會遇到有大量 data 的狀況，不只是 Table 也有可能是 list, card 或 Row 搭配 Col 型態等方式去呈現資料，這時候使用 Pagination 就可以輕鬆處理好換頁效果了！

一、最基本的使用方式：引用與呼叫它

import { Pagination } from 'antd';

const App = () => (
  <div>
    <Pagination pageSize={1} total={50} />
  <div/>
);

export default App;

二、Pagination 可添加的屬性

下面列出幾項我開發最常用的，也可以點此連結去看更多官方 api 文件。

屬性名稱	可以使用的值	說明
position	topLeft 或 topCenter 或 topRight 或 bottomLeft 或 bottomCenter 或 bottomRight	設定頁碼要為在表格的哪個相對位置，要注意的是要使用陣列將值包起來，預設為 `[bottomRight]`
size	default 或 small	此參數指的是頁碼本身樣式上的大小設定。預設是default(32px)，如果想要小一點可以選small(22px)
simple	true 或 false	這是較簡易的頁碼顯示模式，有需要的話加上這個參數為true即可。
pageSize	數字	每頁要顯示的筆數
total	數字	總共有幾頁
current	數字	要呈現的那頁，通常一開始會設置為第一頁
itemRender	`(page, type: 'page'	'prev'
showTotal	`(total) => 共 ${total} 項目`	是否要顯示「總共幾個項目」，預設不會顯示，如果要的話可以加上此參數
showSizeChanger	true 或 false	如果想要讓使用者自行調整每頁要顯示的數量，可以設置這個參數為true(它將會是一個下拉選單)。預設是否。
pageSizeOptions	string[]	跟上面的showSizeChanger搭配使用，用來定義下拉選單的選項。預設為`[10, 20, 50, 100]`
showQuickJumper	true 或 false	是否要提供直接跳到某頁的功能，推薦在筆數超多時的時候用，超級方便。